<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:pe="http://primefaces.org/ui/extensions">
    <h:head>
        <title>Facelet Title</title>
        <style type="text/css">

        </style>
    </h:head>
    <h:body>
        <ui:composition template="../Master/adminMaster.xhtml">
            <ui:define name="page-content">
                <h:panelGroup rendered="#{login.customer.membersRole == 2}">
                    <h:form id="form" class="form">
                        <fieldset class="grey">
                            <legend>Create article</legend>
                            <p:messages id="messages" showDetail="true" closable="true" autoUpdate="true" severity="info, warn"/>
                            <pe:tooltip global="true" myPosition="left center" atPosition="right center" forSelector=".ui-state-error"/>

                            <table border="0" cellpadding="0" cellspacing="0" id="id-form">
                                <tr>
                                    <th valign="top" class="id-form-th"><label>Article title <span class="required">*</span>:</label></th>
                                    <td class="id-form-td">
                                        <p:inputText id="articleTitle" value="#{articleMBean.articleTitle}" required="true" 
                                                     label="Title" styleClass="largest inp-form"
                                                     title="#{component.valid ? '' : articleMBean.getErrorMessage(component.clientId)}">
                                            <f:validateLength minimum="3" maximum="200"/>
                                        </p:inputText>
                                    </td>
                                    <td class="id-form-td"></td>
                                </tr>

                                <tr>
                                    <th valign="top" class="id-form-th"><label>Article content <span class="required">*</span>:</label></th>
                                    <td class="id-form-td">
<!--                                        <p:editor id="articleContent" value="#{articleMBean.articleContent}" required="true" width="600">
                                        </p:editor>-->
                                        <pe:ckEditor id="articleContent" value="#{articleMBean.articleContent}" skin="v2"
                                                     interfaceColor="#33fc14" customConfig="../Master/js/ckeditor_config.js"
                                                     width="100%" height="300" >  
                                        </pe:ckEditor>  
                                    </td>
                                    <td class="id-form-td"></td>
                                </tr>

                                <tr>
                                    <th valign="top" class="id-form-th"><label>Create date:</label></th>
                                    <td class="id-form-td">
                                        <p:calendar value="#{articleMBean.createDate}" id="popupButtonCal" showButtonPanel="true" pattern="dd/MM/yyyy">
                                        </p:calendar>
                                    </td>
                                    <td class="id-form-td"></td>
                                </tr>

                                <tr>
                                    <th class="id-form-th">&nbsp;</th>
                                    <td valign="top" class="id-form-td">
                                        <p:commandButton value="Save" actionListener="#{articleMBean.createArticle}" 
                                                         icon="ui-icon-disk" styleClass="grey"
                                                         update="form,form:messages" process="form"/> 
                                        <p:commandButton type="reset" styleClass="grey" update="form,form:messages" value="Reset"/>
                                    </td>
                                    <td class="id-form-td"></td>
                                </tr>
                            </table>

                        </fieldset>   

                    </h:form>
                </h:panelGroup>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

